<template>
	<div class="homelist">
		<header>
			<h2>{{proptitle}}</h2>
			<router-link to="">更多></router-link>
		</header>
		<ul>
			<li v-for="(item, index) in list" :key="item.id">
				<router-link :to="`/mobile/bookdetail/${item.id}`"
					v-if="index < 6">
					<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
					<h3>{{item.name}}</h3>
					<span v-show="proptitle == '新书上市'">￥{{item.price}}</span>
					<span v-show="proptitle == '热门推荐'">月销售:{{item.salenum}}</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'MobileHomeList',
		props: ['proptitle'],
		data() {
			return {
				booklist: [],
				list: [],
				total: 0
			}
		},
		async mounted() {
			await this.$axios.get("/api/public/findPageBook/0/0/0").then(res => {
				this.total = res.data.data.total
			})
			await this.$axios.get("/api/public/findPageBook/1/" + this.total + "/0").then(res => {
				this.booklist = res.data.data.books
			})
			this.booklist.sort(function(a, b) {
				let data = new Date(a.tmake).getTime()
				let data2 = new Date(b.tmake).getTime()
				return data2 - data
			})
			
			if (this.proptitle == "热门推荐") {
				this.booklist.sort(function(a, b) {
					return b.salenum - a.salenum
				})
			}
			this.list = this.booklist
		},
	}
</script>

<style scoped>
	.homelist {
		width: 100%;
	}

	.homelist header {
		line-height: 2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.homelist header h2 {
		color: #a67b5b;
		font-size: 1rem;
		margin-left: 0.5rem;
	}

	.homelist header a {
		display: inline-block;
		width: 3rem;
		font-size: 0.8rem;
		color: #a67b5b;
	}

	.homelist ul {
		width: 96%;
		margin: 0 auto 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.homelist ul li {
		width: 46%;
		overflow: hidden;
		margin-bottom: 0.5rem;
		margin-left: 0.6rem;
		background-color: white;
		text-align: center;
		position: relative;
	}

	.homelist ul li img {
		width: 80%;
		height: 10rem;
		margin-top: 1rem;
	}

	.homelist ul li h3 {
		width: 100%;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 0.8rem;
		background-color: rgba(245, 213, 160, 0.5);
		color: #a67b5b;
		text-align: center;
		font-weight: normal;
		/* 中文强制不换行 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 支持 webkit内核的浏览器才能生效 */
		/* overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; */
	}

	.homelist ul li span {
		font-size: 0.7rem;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		right: 0;
		color: gold;
		padding: 0.5rem 0.3rem;
		border-radius: 0 0 0 0.6rem;
	}
</style>